<app-common-header [title]="'RESET PAYMENT PASSWORD'"
  [routerUrl]="backUrl"></app-common-header>

<ion-content>
  <div>
    <form [formGroup]="resetPwdForm">
      <ion-grid>
        <ion-row>
          <ion-col size="12">
            <ion-label>
              <ion-text color="" class="form_title">
                {{'myAccount.setting.payment_settings.password_setting.reset_setting.reset_title' | translate}}
              </ion-text>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-grid>
            <ion-row class="input_bottom_color">
              <ion-col size="7">
                <ion-input placeholder="Code" required="true" name="code" formControlName="code" maxlength="6">
                </ion-input>
              </ion-col>
              <ion-col size="5">
                <ion-button size="small" fill="clear" class="btn_color ion-float-right" type="button" *ngIf="sendView" disabled="disabled">
                  <!-- Resend After {{seconds}} s -->
                  {{'myAccount.setting.payment_settings.password_setting.reset_setting.resend_button' | translate}} {{seconds}} s 
                </ion-button>
                <ion-button size="small" fill="clear" color="primary" class="btn_color ion-float-right" type="button"
                  *ngIf="!sendView" (click)="sendVerificationCode()">
                  {{'myAccount.setting.payment_settings.password_setting.reset_setting.send_button' | translate}}
                </ion-button>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <ion-button expand="full" [disabled]="!resetPwdForm.valid" (click)="toNext()">
              {{'myAccount.setting.payment_settings.password_setting.reset_setting.next_button' | translate}}
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </form>
  </div>
</ion-content>